<template>
    <div class="myCoupons">
      <div class="title">
        <div class="back-wrapper"><back></back></div>
        我的优惠券
        <div class="add" @click="$router.push('/addCoupons')"></div>
      </div>
      <loading v-show="isLoading"></loading>
      <transition name="fade">
        <div class="mask-layer" v-show="maskLayer">
          <div class="alert-wrapper border-1px">
            <div class="title">{{checkedCouponCode}}</div>
            <div class="desc-wrapper" ref="mask-content">
              <div class="desc">
                {{checkedDesc}}
              </div>
            </div>
            <div class="btn" @click="maskLayer = false">确认</div>
          </div>
        </div>
      </transition>
      <div class="refresh-wrapper" v-show="isRefresh">
        <refresh></refresh>
      </div>
      <div class="content" ref="content">
        <div class="content-container">
          <div class="empty" v-show="isRemove">
            <p class="text">您还没有优惠券哦</p>
          </div>
          <div class="line-block-item" v-for="item in couponsList" :class="{overdue:item.status!=2}" @click="_showDesc(item)">
            <div class="ball-top-left ball"></div>
            <div class="ball-top-right ball"></div>
            <div class="ball-bottom-left ball"></div>
            <div class="ball-bottom-right ball"></div>
            <div class="left">
              <h1 class="name">{{item.name}}</h1>
              <p class="introduction">{{item.ruleDesc}}</p>
              <p class="time">有效期至:{{item.expiredDate}} &nbsp;&nbsp;点击查看详情</p>
            </div>
            <div class="right" :class="{isOverdue:item.status===3,isUse:item.status===1}">
              <div class="status-wrapper" >
                <div class="icon" v-if="item.type===1002&&item.status===2"></div>
                <div class="count" v-if="item.type===1001&&item.status===2"><a>￥</a>{{item.facePrice}}</div>
              </div>
            </div>
          </div>
          <endLine :text="'我是有底线的'" v-show="endFlag&&couponsList.length"></endLine>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
  import {getStorage} from "../../../common/js/localStorage";
  import Toast from "mint-ui"
  import refresh from '../../../components/refresh/refresh'
  import loading from '../../../components/loading/loading'
  import endLine from '../../../components/endLine/endLine'
  import global from '../../../common/js/global'
    export default {
        name: "myCoupons",
        mounted(){
          this._getMyCouponList()
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['content'],{
                click:true,
                pullDownRefresh: {
                  threshold: 40,
                  stop: 30
                }
              })
              scroll.on('pullingDown', () => {
                this.isRefresh = true
                setTimeout(()=>{
                  window.history.go(0)
                  scroll.finishPullDown();
                },600)
              });
            }else {
              this.scroll.refresh();
            }
          })
        },
        data(){
          return{
            couponsList:[],
            isRefresh:false,
            isRemove:true,
            checkedCouponCode:'',
            checkedDesc:'',
            maskLayer:false,
            isLoading:false
          }
        },
        methods:{
          _showDesc(item){
            this.checkedCouponCode = item.couponCode
            this.checkedDesc = item.ruleDesc
            this.maskLayer = true
            this.$nextTick(()=>{
              if(!this.scroll){
                // return
                let scroll = new BScroll(this.$refs['mask-content'],{
                  click:true,
                })}else{
                this.scroll.refresh();
              }
            })
          },
          _getMyCouponList(){
            this.isLoading = true
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/myCoupon',
                data:{
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  this.isLoading = false
                  let data = res.data.data
                  this.couponsList = data.myCouponList
                  if(data.myCouponList.length){
                    this.isRemove = false
                  }else {
                    this.isRemove = true
                  }
                }else if(res.data.code===10){
                  this.$router.push('/login')
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
              }

            })
          }
        },
        components:{
          'back':back,
          'refresh':refresh,
          'loading':loading,
          'endLine':endLine
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .myCoupons
    position absolute
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .mask-layer
      position absolute
      width 100%
      height 100%
      background rgba(0,0,0,.5)
      z-index 10000
      &.fade-enter-active, &.fade-leave-active
        transition opacity .5s
      &.fade-enter, &.fade-leave-to
        opacity 0
      .alert-wrapper
        width calc(100% - 80px)
        margin 80px 40px
        background #171718
        border-radius 3px
        overflow hidden
        .title
          height 44px
          line-height 44px
          padding 0
          margin 0
          font-size 18px
          border-1px(#525252)
        .desc-wrapper
          overflow hidden
          height 140px
          text-align left
          color #ffffff
          font-size 14px
          line-height 20px
          border-1px(#525252)
          padding 10px 10px 30px 10px
          .desc
            padding 10px 0 20px 0px

        .btn
          background #f7c20f
          color #161719
          height 44px
          font-size 16px
          line-height 44px

    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .add
        position absolute
        right 10px
        top 10px
        width 18px
        height 18px
        background url("icon_add.svg")no-repeat
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .content
      height calc(100% - 62px)
      padding 10px
      overflow hidden
      .content-container
        padding-bottom 10px
        .empty
          position absolute
          top 80px
          left calc(50% - 80px)
          height 20px
          padding-top 160px
          width 160px
          background url("icon_cinema_empty@2x.png")no-repeat center top/124px 124px
          .text
            color #666666
            height 20px
            line-height 20px
            font-size 12px
        .line-block-item
          position relative
          display flex
          min-height 110px
          background linear-gradient(to right, #ffcf06, #e1a21f);
          margin-bottom 10px
          &.overdue
            background #212122
          .left
            flex 1
            padding 18px 20px
            border-right 2px dashed #101011
            text-align left
            color #333333
            .name
              height 22px
              line-height 22px
              font-size 16px
              font-weight 600
            .introduction
              line-height 20px
              font-size 12px
              padding-top 15px
              height 40px
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-line-clamp 2
              -webkit-box-orient vertical
            .time
              height 17px
              line-height 17px
              padding-top 6px
              font-size 12px
          .right
            flex 0 0 89px
            position relative
            &.isOverdue
              background url("icon_isOverdue.svg")no-repeat center calc(100% - 20px)/63px 50px
              /*background #00b43c*/
            &.isUse
              background url("icon_isUse.svg")no-repeat center calc(100% - 20px)/63px 50px
            .status-wrapper
              position absolute
              top calc(50% - 21px)
              z-index 80
              width 100%
              text-align center
              height 42px
              color #333333
              .icon
                height 42px
                background url("icon_dy.svg")no-repeat center center
              .count
                height 42px
                font-size 30px
                line-height 42px
                a
                  color #333333
                  font-size 18px
          .ball
            position absolute
            z-index 100
            width 10px
            height 10px
            background #101011
            border-radius 5px
            &.ball-top-left
              top -5px
              left -5px
            &.ball-top-right
              right -5px
              top -5px
            &.ball-bottom-left
              bottom -5px
              left -5px
            &.ball-bottom-right
              bottom -5px
              right -5px
</style>
